<template>
  <!--  <div>-->
  <el-container class="main">
    <el-header height="120px">
      <div style="height: 100%;width: 96%; margin-left: 100px;;display: flex;flex-direction: column;justify-content: space-between;align-items: flex-start;cursor: pointer">
        <div style="width: 100%;height:35%;display: flex;justify-content: space-between;cursor: pointer">
          <div style="margin-left: 0.8%; display: flex;justify-content: space-between;align-items: flex-end;width: 22%;">
            <div id="statusAna" :class="styleList.statusAna" @click="statusAnaHander(0)">
              状态分析
            </div>
            <div id="diagAna" style="margin-left: -3%;" :class="styleList.diagAna" @click="statusAnaHander(1)">
              诊断分析
            </div>
            <div>
              <img style="height: 18px;margin-bottom: -3%;margin-left: -25%;" src="@/assets/img/标题4.png" alt="">
            </div>
          </div>
          <div style="margin-right: 5%; display: flex;justify-content: space-between;align-items: center;width: 14%;">
            <div style="color:rgb(6,203,255); font-size:15px;vertical-align: middle;display: flex;" @click="quickFun('后退')">
              <img src="@/assets/img/后退.png" alt="">
              <span style="line-height:15px;margin-left: 5px;">后退</span>
            </div>
            <div style="color:rgb(6,203,255);font-size:15px;vertical-align: middle;display: flex;" @click="quickFun('刷新')">
              <img src="@/assets/img/刷新.png" alt="">
              <span style="line-height:15px;margin-left: 5px;">刷新</span>
            </div>
            <div style="color:rgb(6,203,255);font-size:15px;vertical-align: middle;display: flex;" @click="quickFun('维修')">
              <img style="height: 16px;" src="@/assets/img/维修.png" alt="">
              <span style="line-height:15px;margin-left: 5px;">检修</span>
            </div>
          </div>
        </div>
        <div class="secondMenu">
          <div v-if="secondMenu==0" style="width:35%;height: 100%;margin-left: 1.5%;display: flex;flex-direction: row;justify-content: space-between;align-items: flex-start;">
            <div :class="styleList.missAngle0" @click="handler1($event,0)">
              信息汇集
            </div>
            <div :class="styleList.missAngle1" @click="handler1($event,1)">
              状态监测
            </div>
            <div :class="styleList.missAngle2" @click="handler1($event,2)">
              状态评估
            </div>
            <div :class="styleList.missAngle3" @click="handler1($event,3)">
              检修状态
            </div>
          </div>
          <div v-if="secondMenu==1" style="width:44%;height: 100%;margin-left: 1.5%;display: flex;flex-direction: row;justify-content: space-between;align-items: flex-start;">

            <div :class="styleList.missAngle0" @click="handler2($event,0)">
              诊断总览
            </div>
            <div :class="styleList.missAngle1" @click="handler2($event,1)">
              故障分析
            </div>
            <div :class="styleList.missAngle2" @click="handler2($event,2)">
              案例对比
            </div>
            <div :class="styleList.missAngle3" @click="handler2($event,3)">
              故障报告
            </div>
            <div :class="styleList.missAngle4" @click="handler2($event,4)">
              数据维护
            </div>
          </div>
        </div>
      </div>
    </el-header>
    <el-container style="background-color: #061727;height: 88%;">
      <el-Aside width="5.3%" />
      <el-main style="width: 90%;margin-top: 1%;">

        <!-- <el-col  style="background-color: #062339;width: 300px;height: 760px;margin-top: 20px;">
        <father-menu></father-menu>
        </el-col> -->
        <!-- <el-col style="width: 94.7%;height: 100%;"> -->
        <router-view />
        <!-- </el-col> -->

      </el-main>
    </el-container>

  </el-container>

<!--  </div>-->
</template>

<script>
import DeviceStatus from '@/components/MyDeviceCompone/DeviceStatus'
import FatherMenu from '@/components/MyBar/FatherMenu'
export default {
  name: 'PageTest',
  components: { DeviceStatus, FatherMenu },
  props: [],
  data() {
    return {
      styleList: {
        missAngle0: 'missAngleAfter',
        missAngle1: 'missAngleBefore',
        missAngle2: 'missAngleBefore',
        missAngle3: 'missAngleBefore',
        missAngle4: 'missAngleBefore',
        statusAna: 'statusAnaAfter',
        diagAna: 'diagAnaBefore',
        img1: require('@/assets/img/标题2a.png')
      },
      secondMenu: 0,
      formData: {
        field101: [1, 2]
      },
      params: ''
    }
  },
  computed: {},
  watch: {

  },
  created() {

  },
  mounted() {
    this.statusAnaHander(0)
  },
  methods: {
    initParams() {
      this.styleList.missAngle0 = 'missAngleAfter'
      this.styleList.missAngle1 = 'missAngleBefore'
      this.styleList.missAngle2 = 'missAngleBefore'
      this.styleList.missAngle3 = 'missAngleBefore'
      this.styleList.missAngle4 = 'missAngleBefore'
    },
    quickFun(tagParam) {
      console.log(tagParam)
      // alert('您点击了[' + tagParam + ']按钮')
    },
    statusAnaHander(index) {
      console.log('一级按钮', index)
      this.initParams()
      if (index == 0) {
        this.secondMenu = 0
        this.styleList.statusAna = 'statusAnaAfter'
        this.styleList.diagAna = 'diagAnaBefore'
        this.$router.push({
          name: 'infocollection',
          params: {
            id: 1
          }
        })
      } else {
        this.secondMenu = 1
        this.styleList.statusAna = 'statusAnaBefore'
        this.styleList.diagAna = 'diagAnaAfter'
        this.$router.push({ path: '/PageTest/disgnosticview' })
      }
    },

    handler1(event, id) {
      // alert('您切换到[' + event.target.innerText + ']页面')
      console.log(id)
      const mAlist = ['missAngleBefore', 'missAngleAfter']
      for (let i = 0; i < 4; i++) {
        if (i == id) {
          this.styleList['missAngle' + i] = mAlist[1]
        } else {
          this.styleList['missAngle' + i] = mAlist[0]
        }
      }
      if (id == 0) {
        this.$router.push({
          name: 'infocollection',
          params: {
            id
          }
        })
      }
      if (id == 1) {
        this.$router.push({
          name: 'StatusMonitor',
          params: {
            id
          }
        })
      }
      if (id == 2) {
        this.$router.push({
          name: 'StateAssessment',
          params: {
            id
          }
        })
      }
      if (id == 3) {
        this.$router.push({
          name: 'maintenance',
          params: {
            id
          }
        })
      }
      // else{
      //     this.$router.push({
      //       name:'Building',
      //       params:{
      //        id
      //       }
      //     })
      //   }
    },
    handler2(event, id) {
      // alert('您切换到[' + event.target.innerText + ']页面')
      console.log(id)
      const mAlist = ['missAngleBefore', 'missAngleAfter']
      for (let i = 0; i < 5; i++) {
        if (i == id) {
          this.styleList['missAngle' + i] = mAlist[1]
        } else {
          this.styleList['missAngle' + i] = mAlist[0]
        }
      }
      if (id == 3) {
        this.$router.push({ path: '/PageTest/disgnoseReport' })
      }
      if (id == 1) {
        this.$router.push({ path: '/PageTest/failureanalysis' })
      }
      if (id == 0) {
        this.$router.push({ path: '/PageTest/disgnosticview' })
      }
      if (id == 4) {
        this.$router.push({ path: '/PageTest/datamaintain' })
      }
      if (id == 2) {
        this.$router.push({ path: '/PageTest/casecomparison' })
      }
    },
    handleindex3() {
      console.log(this.$route.params.id)
      var id = this.$route.params.id
      this.$router.push({
        name: 'index3',
        params: {
          id
        }
      })
    },
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
    getField101Options() {
      // TODO 发起请求获取数据
      this.field101Options
    }
  }
}

</script>
<style lang="scss" scoped>
.statusAnaBefore{
  background: linear-gradient(236deg, transparent 10px, rgb(15,117,189) 0);

  // background-color: rgb(5,117,189);
  background:url("~@/assets/img/标题2b.png") no-repeat center;
  background-size: cover;
  width: 170px;
}
.diagAnaBefore{
  background:linear-gradient(45deg, transparent 15px, #58a 0);
  background:url("~@/assets/img/标题3b.png") no-repeat center;
  background-size: cover;
  width: 170px;
}
.statusAnaAfter{
  background: linear-gradient(236deg, transparent 10px, rgb(15,117,189) 0);

  // background-color: rgb(5,117,189);
  background:url("~@/assets/img/标题2a.png") no-repeat center;
  background-size: cover;
  width: 170px;
}
.diagAnaAfter{
  background:linear-gradient(45deg, transparent 15px, #58a 0);
  background:url("~@/assets/img/标题3a.png") no-repeat center;
  background-size: cover;
  width: 170px;
}
.main{
  height: 1080px;
  width: 1920px;
}
.pic{
  background: linear-gradient(-135deg, transparent 10px, 0);
  background:url("~@/assets/img/标题4.png") no-repeat center;
  background-size: cover;
  width: 140px;
}
.secondMenu{
  border-top-style:solid;
	border-color:rgb(9,90,139);
	border-bottom-style:solid;
  margin-left:-1%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 70%;
  width: 100%;
}
.missAngleBefore{
    background: linear-gradient(-45deg, transparent 10px, 0);
    // background: linear-gradient(-45deg, transparent 10px, rgb(4, 79, 129) 0);
    background:url("~@/assets/img/标题1b.png") no-repeat center;
    width: 150px;
    height: 40px;
    background-size:cover;
    margin: auto;
    text-align:center;
    color:rgb(11,98,159);
    line-height: 38px;
    cursor: pointer;
}

.missAngleAfter{
     background: linear-gradient(-45deg, transparent 10px, 0);
    // background: linear-gradient(-45deg, transparent 10px, rgb(4, 79, 129) 0);
    background:url("~@/assets/img/标题1a.png") no-repeat center;
    width: 150px;
    height: 40px;
    // background-size:cover;
    margin: auto;
    text-align:center;
    color:rgb(19,152,187);
    line-height: 38px;
    cursor: pointer;
}
.el-header {
  background-color: #062339;
  color: #333;
  text-align: center;
  // line-height: 20px;

}

.el-aside {
  background-color: #062339;
  padding: auto;
}

.el-main {
  background-color: #061727;
  color: #333;
  text-align: center;
  padding: 0%;
  /*line-height: 20px;*/
}

html,body,#app,.el-container{
  padding: 0px;
  margin: 0px;
  height: 100%;
}
.el-card__body{
  background-color:#053356 ;
  padding: 0;
}
.el-card{
  background-color: #061727 ;
  padding: 0;
  border: none;
  border-width: 0px;
  // margin-bottom: 10px;

}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
// .menu-wrapper{
//  	/* overflow: hidden;
//     background-image:url('../../assets/侧边.png') no-repeat center center; */
//     /* background-color: #062339; */

//  }
.dstatus{
    float:left;
    margin: left;
}
// .el-row {
//     // margin-bottom: 20px;
//     /* &:last-child {
//       margin-bottom: 0;
//     } */
//   }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .vert{
    border: 1px solid rgba(24, 9, 189, 0.621);
    margin: 25px;
    height: 800px;
    width: 250px;
  }
>>>.el-button{
  margin: 50px;
  display: inline-block;
  background: #053356;

}
>>>.el-button>div{
  padding: 1px;
  color: white;
  font-size: 2px;
}
.list-group-item.active > .badge,
.list-group-item > .badge {
  float: right;
}
.list-group-item > .badge + .badge {
  margin-right: 5px;
}
</style>
